<template>
	<!-- 用户列表 -->
	<div>
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 用户列表状态：
		<el-switch v-model="showCtrl" @click.native="getCtrlStatusList" active-color="#13ce66" inactive-color="#ff4949">
		</el-switch> -->

		<el-table border :data="goodsArr" max-width="900">
			<el-table-column prop="name" label="名称" width="80">
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="address" label="地址" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="remark" label="备注" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="small" @click="deleteItem(scope.$index)" type="danger" icon="el-icon-delete"></el-button>
					<el-button size="small" @click="detail(scope.row.id)" type="success">查看明细</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="page-num" background layout="prev, pager, next" :page-size="page_size" @current-change="handleCurrentChange" :total="page">
		</el-pagination>
	</div>
</template>
<script>
	export default {
		name: 'manage',
		data() {
			return {
				title: '',
				goodsArr: [],
				params: {
					"numPerPage": 10,
					"order": "asc",
					"pageNum": 1,
					"supplierStateEnum": "OPEN"
				},
				isStatus: [],
				page_size: 2, //每页显示几个
				page: 0, //总页数
				currentPage: 1, //当前页
				showCtrl:true

			};
		},
		components: {},
		created() {

		},
		mounted() {
			this.getList();
		},

		methods: {
			// 删除单个联系人
			deleteItem(index) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.supplierContacts.splice(index, 1);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
			},
			/*分页跳转*/
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				this.getList();
			},
			getCtrlStatusList(){
				console.log(this.showCtrl)
				this.params.supplierStateEnum = this.showCtrl == true ? 'OPEN' : 'CLOSE';
				this.getList();
				
			},
			// 获取列表
			getList() {
				this.params.pageNum = this.currentPage;
				this.$post("supplierQuery", this.params).then(res => {
					if(res.code == 200) {
						this.goodsArr = [];
						this.page = res.data.total;
						var list = res.data.rows;
						for(var i in list) {
							console.log(list[i])
							this.goodsArr.push(list[i]);
							this.isStatus[i] = list[i].supplierState == "OPEN" ? true : false;
						}
					} else {
						this.$msg.warning(res.message);
					}
				});
			},
			// 开启、关闭状态
			ctrlStatus(id) {
				this.$post("supplierControl", { 
					id: id
				}).then(res => {
					if(res.code == 200) {
						this.$msg.success(res.message);
					} else {
						this.$msg.warning(res.message);
					}
				});
			},
			// 跳转详情页面
			detail(id) {
				this.$router.push({
					name: 'updateSupplier',
					params: {
						id: id
					}
				})
			}
		},
	}
</script>
<style type="text/css">

</style>